<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.css"/>
</head>
<style>
  /*  img{
        width: 30%;
        min-width: 16em;
        height: auto;
    }*/
    .row>div{
       /* width: 20rem;*/
        height: 4rem;
        background-color: #00b3ee;
        border: 1px solid red;
        float: left;
        margin-left: 0px;
    }
    .aa{
        height: 2em;
        border: 1px solid black;
        margin-left: 0px !important;
    }
</style>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <div class="aa col-lg-6 text-center" style="vertical-align: middle">首页</div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3"></div>
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-1 col-md-12 col-lg-12"></div>
    </div>
</div>

<!--
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">11</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">22</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">33</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">44</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">55</div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">66</div>
    </div>
</div>
-->


<!--
<span class="btn btn-success btn-group-lg  glyphicon glyphicon-user">click</span>
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>


&lt;!&ndash;tab选项卡&ndash;&gt;
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
    <li><a href="#tab2" data-toggle="tab">tab2</a></li>
    <li><a href="#tab3" data-toggle="tab">tab3</a></li>
    <li><a href="#tab4" data-toggle="tab">tab4</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1"><img src="img/item-1.jpg"></div>
    <div class="tab-pane" id="tab2"><img src="img/item-2.jpg"></div>
    <div class="tab-pane" id="tab3"><img src="img/item-3.jpg"></div>
    <div class="tab-pane" id="tab4"><img src="img/item-4.jpg"></div>
</div>
-->
<!--tab选项卡end-->

<!--<div class="row">
    <div class="col-sm-1">1</div>&lt;!&ndash;col-md-push-1向右边推一格； col-lg-offset-1&ndash;&gt;
    <div class="col-sm-1">2</div>
    <div class="col-sm-1">3</div>
    <div class="col-sm-1">4</div>
    <div class="col-sm-1">5</div>
    <div class="col-sm-1">6</div>
    <div class="col-sm-1">7</div>
    <div class="col-sm-1">8</div>
    <div class="col-sm-1">9</div>
    <div class="col-sm-1">10</div>
    <div class="col-sm-1">11</div>
    <div class="col-sm-1">12</div>
</div>-->


<script src="jquery-2.1.1.js"></script>
<script src="bootstrap-3.3.5/js/bootstrap.js"></script>
    <script>
       /* tab选项卡*/
        $(".nav a:last").tab('show');//显示最后一张图片；
        /*tab选项卡*/
    </script>

</body>
</html>